<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
      xmlns:p="http://xmlns.jcp.org/jsf/passthrough">

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="shortcut icon" href="image/favicon.ico" type="image/x-icon"/>
        <link href="css/startbootstrap.css" rel="stylesheet" type="text/css"/>
        <link href="css/about.css" rel="stylesheet" type="text/css"/>
        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
        <link href="css/contact.css" rel="stylesheet" type="text/css"/>        
        <link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
        <link href="css/skeleton.css" rel="stylesheet" type="text/css"/>        
        <script src="js/bootstrap.min.js" type="text/javascript"></script>
        <script src="js/jquery-1.11.0.js" type="text/javascript"></script>
        <script src="js/eventJS.js" type="text/javascript"></script>
        <title>Welcome to Pumpkin</title>

    </h:head>

    <h:body>

        <div id="top">
            <ui:insert name="top">
                <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
                    <div class="container">
                        <!-- Brand and toggle get grouped for better mobile display -->
                        <div class="navbar-header">
                            <a class="navbar-brand" href="Home.xhtml">Pumkin</a>
                        </div>

                        <!-- Collect the nav links, forms, and other content for toggling -->
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav">
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" title="Our Collection of Templates &amp; Themes">Events <b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="/template-categories/all"><i class="fa fa-globe fa-fw"></i> All Templates &amp; Themes</a>
                                        </li>
                                        <li>
                                            <a href="/template-categories/popular"><i class="fa fa-star fa-fw"></i> Most Popular</a>
                                        </li>
                                        <li>
                                            <a href="/buy-bootstrap-templates"><i class="fa fa-shopping-cart fa-fw"></i> Buy Bootstrap Templates</a>
                                        </li>
                                        <li class="divider"></li>
                                        <li class="dropdown-header">
                                            Template &amp; Theme Categories:
                                        </li>
                                        <li>
                                            <a href="/template-categories/admin-dashboard">Admin and Dashboard</a>
                                        </li>
                                        <li>
                                            <a href="/template-categories/full-websites">Full Websites</a>
                                        </li>
                                        <li>
                                            <a href="/template-categories/landing-pages">Landing Pages</a>
                                        </li>
                                        <li>
                                            <a href="/template-categories/one-page">One Page Websites</a>
                                        </li>
                                        <li>
                                            <a href="/template-categories/portfolios">Portfolios</a>
                                        </li>
                                        <li>
                                            <a href="/template-categories/blogs">Blogs</a>
                                        </li>
                                        <li>
                                            <a href="/template-categories/ecommerce">Ecommerce</a>
                                        </li>
                                        <li>
                                            <a href="/template-categories/unstyled">Unstyled Starter Templates</a>
                                        </li>
                                        <li>
                                            <a href="/template-categories/navigation-menus">Navigation and Navbars</a>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="About.xhtml" title="The Official Start Bootstrap Blog">About</a>
                                </li>
                                <li>
                                    <a href="FAQs.xhtml" title="Help with Start Bootstrap Templates &amp; Themes">FAQs</a>
                                </li>
                                <li>
                                    <a href="Contact.xhtml" title="Contact the Start Bootstrap Team">Contact</a>
                                </li>
                            </ul>
                            <h:form>
                                <div class="col-lg-6" style="width: 350px;margin-left: 60px;margin-top: 10px;">
                                    <div class="input-group">


                                        <h:inputText id="txtSearch" value="#{eventSearchController.parameter}"  class="form-control" style="display: block;width: 250px;">
                                            <f:validateLength minimum="1" maximum="15" rendered="true"></f:validateLength>

                                        </h:inputText>

                                        <span class="input-group-btn" style="display: block;">

                                            <h:commandButton id="btnSearch" class="btn btn-default"  action="#{eventSearchController.redirect(eventSearchController.parameter)}" value="Search">
                                                <f:ajax render="@form" execute="@form"></f:ajax>
                                            </h:commandButton>
                                        </span>
                                    </div><!-- /input-group -->
                                </div><!-- /.col-lg-6 -->
                            </h:form>

                            <ul class="nav navbar-nav navbar-right">
                                <li style="padding-right:8px"><a href="UserProfile.xhtml"><img src="image/knewstuff (2).png" alt="" style="padding-bottom: 6px;"/> #{login.fullname}</a></li>
                                <li>
                                    <div  style="right:0px;position: fixed;width: 100px;height: 51px;z-index: 999;padding-top: 7px;padding-left: 17px">
                                        <i class="fa fa-flag fa-2x fa-fw notification "></i>
                                        <div class="notificationmain" style="display: none">
                                            <div class="notificationheader">
                                                <div style="float: right"><i class="fa fa-times fa-fw notificationclose" style="color: #ccc;cursor: pointer"></i></div>
                                                Notifications
                                            </div>
                                            <h:form>
                                                <div id="notificationcontent" style="width: 100%; height: 300px;overflow-y: auto;overflow-x: hidden;padding-bottom: 10px;">

                                                    <ul>
                                                        <c:if test="#{notificationController.notificationEventNew !=null}">
                                                            <c:forEach var="ev" items="#{notificationController.notificationEventNew}">
                                                                <a href="/BluePumpkinCompany/EventDetail.xhtml?eventId=#{ev.eventId.eventId}" style="width: 100%;height: 100%"> 
                                                                    <li>
                                                                        <i class="fa fa-users fa-2x fa-fw" style="color: #F60"></i>
                                                                        #{ev.nameEvent}
                                                                        <h:commandButton class="closeNotification" action="#{notificationController.changeStatus(ev.id)}" value="x">
                                                                            <f:ajax render="@form" execute="@form"/>
                                                                        </h:commandButton>
                                                                        <font style="color: red;float: right">    <i class="fa fa-bell  fa-fw" style="color: red ;"></i> </font> <font style="color: #ccc;float: right"> event new</font> 
                                                                    </li>
                                                                </a>
                                                            </c:forEach>
                                                        </c:if>
                                                        <c:if test="#{notificationController.notificationBirthdayNotices !=null}">
                                                            <c:forEach var="ev" items="#{notificationController.notificationBirthdayNotices}">
                                                               
                                                                    <a href="#" style="width: 100%;height: 100%"> 
                                                                        <li class="ab" onclick="showInput('ACB#{ev.id}')">
                                                                            <img src="#{ev.avatarImg}" style="width: 35px;height: 35px"></img>
                                                                            #{ev.fullname} 
                                                                            <h:commandButton class="closeNotification" action="#{notificationController.changeStatus(ev.id)}" value="x">
                                                                                <f:ajax render="@form" execute="@form"/>
                                                                            </h:commandButton>
                                                                            <font style="color: red;float: right">  <i class="fa fa-gift  fa-fw" style="color: red ;"></i> </font><font style="color: #ccc;float: right"> #{ev.birthdate.day}/ #{ev.birthdate.month}/#{ev.birthdate.year} : today's Birthdays  </font>
                                                                        </li>
                                                                        <li style="display: none" class="ACB#{ev.id}">
                                                                            <h:form>
                                                                                <h:inputText id="txt" class="form-control inputwish" style="width:60%;float: left;position: relative;left:40px" value="#{notificationController.message}" validatorMessage="write a birthday wish betwen 3 to 10 charater" required="true" requiredMessage="write a birthday wish ." p:placeholder="write a birthday wish ." >
                                                                                    <f:validateLength for="txt" maximum="100" minimum="3"/>
                                                                                </h:inputText>
                                                                                <h:commandButton action="#{notificationController.addBirthdaywishes(ev.id)}" value="send" class="btn btn-default" style="float: right;position: relative;right: 40px">
                                                                                    <f:ajax render="@form" execute="@form"/>
                                                                                </h:commandButton>
                                                                            </h:form> 
                                                                        </li>
                                                                    </a>
                                                            </c:forEach>
                                                        </c:if>
                                                        <c:if test="#{notificationController.notificationEventReminders !=null}">
                                                            <c:forEach var="ev" items="#{notificationController.notificationEventReminders}">
                                                                <a href="/BluePumpkinCompany/EventDetail.xhtml?eventId=#{ev.eventId.eventId}" style="width: 100%;height: 100%"> 
                                                                    <li>
                                                                        <i class="fa fa-users fa-2x fa-fw" style="color: #F60"></i>
                                                                        #{ev.nameEvent} 
                                                                        <h:commandButton class="closeNotification" action="#{notificationController.changeStatus(ev.id)}" value="x">
                                                                            <f:ajax render="@form" execute="@form"/>
                                                                        </h:commandButton>
                                                                        <font style="color: red;float: right"><i class="fa fa-bell  fa-fw" style="color: red ;"></i> </font> <font style="color: #ccc;float: right"> event offing</font> 
                                                                    </li>
                                                                </a>
                                                            </c:forEach>
                                                        </c:if>
                                                        <c:if test="#{notificationController.notificationBirthdayWishes !=null}">
                                                            <c:forEach var="ev" items="#{notificationController.notificationBirthdayWishes}">
                                                                <a href="#" style="width: 100%;height: 100%" class="birthdayWishes"> 
                                                                    <li>
                                                                        <img src="#{ev.avatarImg}" style="width: 35px;height: 35px"></img>
                                                                        #{ev.fullname} 
                                                                        <h:commandButton type="button" class="closeNotification" action="#{notificationController.changeStatus(ev.id)}" value="x">
                                                                            <f:ajax render="@form" execute="@form"/>
                                                                        </h:commandButton>
                                                                        <font style="color: red;float: right">   <i class="fa fa-bullhorn  fa-fw" style="color: red ;"></i> </font><font style="color: #ccc;float: right">  birthday wishes to you</font>
                                                                    </li>
                                                                </a>
                                                            </c:forEach>
                                                            <div class="dialogBirthdayWishes" style="display: none">
                                                                <div class="infoBirthdayWishes">
                                                                    <div class="list-group">
                                                                        <c:forEach var="ev" items="#{notificationController.notificationBirthdayWishes}">
                                                                            <a href="#" class="list-group-item " style="text-decoration: none">
                                                                                <h4 class="list-group-item-heading"><img src="#{ev.avatarImg}" style="width: 35px;height: 35px"></img>
                                                                                    #{ev.fullname}</h4>
                                                                                <div style="position: absolute;right: 0px;top: 0px;">
                                                                                    <h:commandButton type="button" class="closeNotification" action="#{notificationController.changeStatus(ev.id)}" value="x" style="background: #fff">
                                                                                        <f:ajax render="@form" execute="@form"/>
                                                                                    </h:commandButton>
                                                                                </div>
                                                                                <p class="list-group-item-text">#{ev.message}</p>
                                                                            </a>
                                                                        </c:forEach>
                                                                    </div>
                                                                </div>
                                                                <div class="infoBirthdayWishesBg">

                                                                </div>
                                                            </div>
                                                        </c:if>
                                                        <c:if test="#{notificationController.notificationEventInvitations !=null}">
                                                            <c:forEach var="ev" items="#{notificationController.notificationEventInvitations}">
                                                                <a href="/BluePumpkinCompany/EventDetail.xhtml?eventId=#{ev.eventId.eventId}" style="width: 100%;height: 100%"> 
                                                                    <li>
                                                                        <i class="fa fa-users fa-2x fa-fw" style="color: #F60"></i>
                                                                        #{ev.usernameME.username}
                                                                        <h:commandButton class="closeNotification" action="#{notificationController.changeStatus(ev.id)}" value="x">
                                                                            <f:ajax render="@form" execute="@form"/>
                                                                        </h:commandButton>
                                                                        <font style="color: red;float: right">  <i class="fa fa-bullhorn  fa-fw" style="color: red ;"></i> </font><font style="color: #ccc;float: right"> invited to join the event</font>
                                                                    </li>
                                                                </a>
                                                            </c:forEach>
                                                        </c:if>
                                                        <c:if test="#{notificationController.notificationEventUpdate !=null}">
                                                            <c:forEach var="ev" items="#{notificationController.notificationEventUpdate}">
                                                                <a href="/BluePumpkinCompany/EventDetail.xhtml?eventId=#{ev.eventId.eventId}" style="width: 100%;height: 100%"> 
                                                                    <li>
                                                                        <i class="fa fa-users fa-2x fa-fw" style="color: #F60"></i>
                                                                        #{ev.eventId}
                                                                        <h:commandButton class="closeNotification" action="#{notificationController.changeStatus(ev.id)}" value="x">
                                                                            <f:ajax render="@form" execute="@form"/>
                                                                        </h:commandButton>
                                                                        <font style="color: red;float: right">  <i class="fa fa-bullhorn  fa-fw" style="color: red ;"></i> </font><font style="color: #ccc;float: right"> update event</font>
                                                                    </li>
                                                                </a>
                                                            </c:forEach>
                                                        </c:if>

                                                        <c:if test="#{notificationController.notificationEventInvitations == null || notificationController.notificationBirthdayWishes == null || notificationController.notificationEventReminders == null || notificationController.notificationBirthdayNotices == null || notificationController.notificationEventNew == null}">
                                                            <li> No events</li>
                                                        </c:if>
                                                        #{notificationController.checkNotification1()}

                                                    </ul>
                                                </div>
                                            </h:form>
                                        </div>
                                        <c:if test="#{notificationController.getcountNotification() !=0}">
                                            <div class="notificationRing" style="color: #fff">#{notificationController.getcountNotification()}</div>
                                        </c:if>
                                    </div>
                                </li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="background-image: url(image/menu.PNG);background-repeat: no-repeat; margin-top: 10px;"></a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="UserProfile.xhtml"><i class="fa fa-user fa-f" style="color: #B84D45;cursor: pointer;padding-right: 5px;"></i>My Account</a>
                                        </li>
                                        <li>
                                            <a href="ActivityLog.xhtml"><i class="fa fa-plus fa-fw" style="color: #B84D45;cursor: pointer;padding-right: 5px;"></i>Activity Log</a>
                                        </li>
                                        <li class="divider"></li>
                                        <h:form>
                                            <li style="padding-left: 20px;">
                                                <i class="fa fa-key fa-f" style="color: #B84D45;cursor: pointer;padding-right: 5px;"></i><h:commandLink action="#{login.logout()}"  value="Logout"/>
                                            </li>
                                        </h:form>
                                    </ul>
                                </li>
                            </ul>
                            <!--<li><img style="padding-top: 13px;" src="../image/icon3.png" alt=""/></li>-->


                        </div>
                        <!-- /.navbar-collapse -->
                    </div>

                    <!-- /.container -->
                </nav>

            </ui:insert>
        </div>

        <div id="content" class="center_content">
            <header class="sb-page-header">
                <div class="container">


                </div>
            </header>
            <ui:insert name="content">

            </ui:insert>
        </div>

        <div id="bottom">
            <ui:insert name="bottom">
                <hr/>
                <footer>
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-12 footer-below">
                                <p><a href="http://www.startbootstrap.com">Blue Pumpkin</a> is a project maintained by Group 1 - C1209I.
                                    <br/>&copy; Copyright Blue Pumpkin 2014</p>
                            </div>
                        </div>
                    </div>
                </footer>
            </ui:insert>
        </div>
    </h:body>
</html>
